<script lang="ts" setup>
  import { reactive,ref,h } from 'vue' 
  import { ElNotification } from 'element-plus' //FormInstance
  import axios from "../axios"
  import {useRouter} from 'vue-router' //路由跳转(js跳转方式)
  import cookies from 'vue-cookies'
  
  const currnet_user = cookies.get('name');
  const router = useRouter();
  const toPage = (url: string) => {
    router.push({
      name: url
    })
  }
  //初始化数据
  const total = ref < number > (0)
  const search = reactive({
    keyWord: "",
    page: 1,
    pageSize: 8
  }) //初始化查询内容
  const form = reactive({
    name: "",
    desc: "",
    password: "",
    id: 0
  })
  //清空数据
  const resetForm = reactive({
    ...form
  })
  //设置空数据
  const tableData = ref([])
  //弹框开关
  const dialogVisible = ref < boolean > (false)
  const openDialog = () => {
    dialogVisible.value = true;
    Object.assign(form, resetForm)
  }
  //关闭弹框
  const close = () => {
    dialogVisible.value = false;
  }
  //提示框
  const meg_error = (meg:string) => {
    ElNotification({
      // title: 'Custom Position',
      message: h('i', { style: 'color: teal' }, meg),
      position: 'bottom-left', //top-left
      type:'error',
      duration: 2000
    })
  }
  const meg_success = (meg:string) => {
    ElNotification({
      message: meg,
      position: 'bottom-left', //top-left
      type: 'success',
      duration: 20000000
    })
  }
  
  
  //初始化表格数据
  const init = async () => {
    const list = await axios.get('/user',{params:search}).then(res => res.data)
    tableData.value = list?.data ?? [] //可选链 如果双问号左边返回null/undefined 就会返回[]
    total.value = list?.total ?? 0;
  }
  init()


  const changeSize = (page) => {
    search.page = page
    init()
  }
  //保存 和修改 表格数据
  const save = async () => {
    if (form.name.replace(/\s+/g, "").length == 0 || form.password.replace(/\s+/g, "").length == 0) {
      meg_error('账号 或 密码不能为空') 
      return;
    }

    if (form.id) {
      await axios.patch(`/user/${form.id}`,form).then(res => res.data)
      meg_success('修改成功')
    } else {
      await axios.post('/user',form).then(res => res.data)
      meg_success('添加成功')
    }
    close()
    init() //更新数据
  }
  //删除表格数据
  const deleteRow = async (id) => {
    await axios.delete(`/user/${id}`).then(res => res.data)
    meg_success('删除成功');
    init();
  }
  
  //获取 详情
  const edit = (row: any) => {
    dialogVisible.value = true;
    Object.assign(form, row)
  }
</script>


<template>
  <div class="wraps">
    <div style="display: flex;">
      <el-input v-model="search.keyWord" style="width:300px;"></el-input>
      <el-button @click="init" style="margin-left:10px;">搜索</el-button>
      <el-button @click="openDialog" type="primary" style="margin-left:10px;">添加</el-button>
      
      <div style="margin-left: auto;display: flex; align-items: center;">
           <div style="margin-right: 1em;color:teal;font-weight: 100;">欢迎 <font>{{currnet_user ? currnet_user : '游客001'}}</font></div>
           <el-button @click="toPage('login')">Back</el-button>
      </div>
  
    </div>
    <el-table border :data="tableData" style="width: 100%;margin-top: 30px;">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="账号" :show-overflow-tooltip="true" />
      <el-table-column prop="desc" label="描述" :show-overflow-tooltip="true" />
      <el-table-column>
        <template #default="scope" class="scope_button">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button @click="deleteRow(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="changeSize" style="float:right;margin-top:10px;back" background
      layout="prev, pager, next" :page-size="search['pageSize']" :total="total" />
  </div>

  <el-dialog v-model="dialogVisible" width="50%" style="padding:2em 2em 1em 2em;border-radius:5px;">
    <el-form :model="form">
      <el-form-item prop="name" style="padding-bottom: .5em;" label="账号">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item prop="desc" label="密码">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item prop="desc" label="描述">
        <el-input v-model="form.desc" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<style scoped lang="scss">
  .wraps {
    padding: 30px;
    --el-disabled-bg-color: #29324a;
    --el-color-primary: #4595d580;
  }

  .el-table {
    --el-table-row-hover-bg-color: #161c26;
  }
  
  :deep(.el-table__row) {
    transition: all .2s;
    color: #888888;
  }

  :deep(.el-table__row):hover {
    color: #ccc;
    font-size: 1.4em;
    font-weight: bold;
    box-shadow: 0px 0px 300px 20px #4595d580;
  }

    :deep(.el-table__row .cell){  // .el-table__row el-table_1_column_4 cell
      display: flex;
    }

  :deep(.el-form-item__label) {
     color: #96aad3;
     padding-right: 20px;
  }


  :deep(.btn-prev is-first) {
    background-color: #1a1a1a;
  }

  .el-button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;
    border-radius: 5px;
  }

  .el-button:hover {
    border-color: #646cff;
  }

  .el-button:focus,
  .el-button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
  }

  
    
  :deep(.el-input__wrapper),
  :deep(.el-table),
  :deep(.el-table tr),
  :deep(.el-table th.el-table__cell) {
    background-color: transparent;
  }
  
  
  //弹框背景颜色
  //dialog-margin-top:15vh;--el-dialog-bg-color:var(--el-bg-color)
  //改→ dialog-margin-top:15vh;--el-dialog-bg-color:#072339;
  
  //修改提示框
  //border-radius:var(--el-notification-radius);box-sizing:border-box;
  //弹框背景 border:1px solid #3b3b3b;position:fixed;background-color:#1d1e1f;
  //文字颜色 t-font-size);line-height:24px;margin:6px 0 0;color
  
</style>
